<!--登录页面-->
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import api from "@/api";
import validator from 'validator';
import {message} from "ant-design-vue";

const router = useRouter()
onMounted(() => {
  getVerifyCode()
})

interface formDataType {
  account: string | null,
  password: string | null,
  nickname: string | null,
  captcha: string | null
}

const formData = ref<formDataType>({
  account: null,
  password: null,
  nickname: null,
  captcha: null
})
const loading = ref<boolean>(false)

const login = async () => {
  loading.value = true
  if (formValid()) {
    api.register(formData.value).then(res => {
      console.log(res)
      message.success("注册成功")
      router.push('/login')
    })
  }
  loading.value = false
}

const formValid = () => {
  let flag = true
  if (!formData.value.account || validator.isEmail(formData.value.account)) {
    flag = false
    message.error('邮箱不符合规范')
    return
  }
  if (!formData.value.password || formData.value.password.length > 12) {
    flag = false
    message.error('密码不符合规范')
    return
  }
  if (!formData.value.nickname || formData.value.nickname.length > 10) {
    flag = false
    message.error('用户名不符合规范')
    return
  }
  if (!formData.value.captcha || formData.value.captcha.length > 4) {
    flag = false
    message.error('验证码不符合规范')
    return
  }
  return flag
}

//验证码
const verifyCode = ref()
//获取验证码
const getVerifyCode = async () => {
  const response = await api.getVerifyCode({width: 143, height: 43})
  verifyCode.value = response.data.data
}

</script>
<template>
  <div class="register">
    <div class="register-container">
      <div class="board">
        <div class="board-title">创建 Carroll Connect</div>
        <a-input v-model:value="formData.account" placeholder="Email" class="board-input"/>
        <a-input v-model:value="formData.password" type="password" placeholder="Password" class="board-input"/>
        <a-input v-model:value="formData.nickname" placeholder="Nickname" class="board-input"/>
        <div class="verify-code">
          <a-input v-model:value="formData.captcha" placeholder="Verify Code" class="verify-input"></a-input>
          <div class="verify" v-html="verifyCode" @click="getVerifyCode">
          </div>
        </div>
        <div class="link">
          <span class="without-line">已有账号，</span>
          <span class="width-line" @click="router.push('/login')">登录我的账号 </span>
          <span class="material-icons icon">north_east</span>
        </div>
        <a-button shape="circle" class="btn" @click="login">
          <span class="material-icons" v-if="!loading">person_add_alt</span>
          <span class="material-icons loading-icon" v-if="loading">refresh</span>
        </a-button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.register {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(@/assets/image/background.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255, 255, 255, .2);

  &-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    backdrop-filter: blur(10px);
    position: relative;

    .board {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 15px;
      width: 400px;
      height: 500px;
      padding: 20px;


      .board-title {
        font-weight: 600;
        word-break: break-word;
        font-size: 24px;
        color: #4F4F4F;
        text-align: center;
        margin-top: 24px;
      }

      .board-input {
        width: 90%;
        border-radius: 6px;
        height: 43px;
        margin: 20px auto;
        display: block;
      }



      .link {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.3px;
        color: #0070C9;
        cursor: pointer;
        line-height: 30px;

        .icon {
          font-size: 15px;
          //line-height: 30px;
        }

        .icon:hover {
          font-size: 14px;
          text-decoration: underline;
        }

        .without-line {
          color: #4F4F4F;
          text-decoration: none;
        }

        .without-line:hover {
          color: #4F4F4F;
          text-decoration: none;
        }

        .width-line:hover {
          text-decoration: underline;
        }
      }
      .btn {
        width: 55px;
        text-align: center;
        height: 55px;
        line-height: 58px;
        color: #4F4F4F;
        display: block;
        margin: 25px auto 10px auto;

        .loading-icon {
          animation: rotating 1s infinite;
          animation-timing-function: linear;
        }
      }

      .verify-code {
        width: 90%;
        //height: 43px;
        margin: 20px auto;
        //display: block;
        display: flex;
        justify-content: space-between;


        .verify-input {
          width: 45%;
          height: 43px;
          display: block;
          border-radius: 6px;
        }

        .verify {
          cursor: pointer;
          width: 45%;
          height: 43px;
          border: 1px #D9D9D9 solid;
          overflow: hidden;
          //border-radius: 6px;
        }
      }
    }
  }
}

@keyframes rotating {
  100% {
    transform: rotate(360deg);
  }
}
</style>
